<template>
  <div>
    <div class="pop">
      <div class="pop_gongDan">
        <img src="@/assets/img/others/image116.png" class="img1" />
        <img
          src="@/assets/img/others/Group2391.png"
          class="img2"
          @click="dialogTableVisible = true"
        />
      </div>
      <div class="pop_QQ">
        <img src="@/assets/img/others/image114.png" class="img3" />
        <div class="img4">
          <a href="tencent://message/?uin=397421271&Site=Sambow&Menu=yes">在线咨询</a>
        </div>
      </div>
    </div>
    <problem-modal v-model:show="dialogTableVisible" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const dialogTableVisible = ref(false)
</script>
<style lang="less" scoped>
.pop {
  width: 100px;
  height: 400px;
  position: static;
  display: flex;
  z-index: 99;
  flex-direction: column;
  position: fixed;
  bottom: 50px;
  right: 0;
  .pop_gongDan {
    width: 60px;
    height: 170px;
    position: relative;
    .img1 {
      z-index: 99;
      position: absolute;
    }
    .img2 {
      position: absolute;
      top: 45px;
      left: 0;
    }
  }
  .pop_QQ {
    width: 60px;
    height: 170px;
    top: 20px;
    position: relative;
    .img3 {
      z-index: 99;
      position: absolute;
    }
    .img4 {
      position: absolute;
      top: 30px;
      width: 50px;
      height: 130px;
      background: url('@/assets/img/others/Rectangle1538.png');
      left: 0;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 10px;
      a {
        writing-mode: tb-rl;
        font-size: 18px;
        color: #fff;
        letter-spacing: 0.2em;
      }
    }
  }
}
</style>